import React, {Component} from "react";
import './index.less';
import {formateDate} from '../../utils/dateUtils';
//import memoryUtils from "../../utils/memoryUtils";
import {reqWeather} from '../../api/index';
import {withRouter} from 'react-router-dom';
import menuList from "../../config/menuConfig";
import { Modal } from 'antd';
import LinkButton from "../link-button";
import {connect} from 'react-redux';
//import storageUtils from "../../utils/storageUtils";
import {logout} from '../../redux/actions'

class Header extends Component {
    state = {
        currentTime: formateDate(Date.now()),
        dayPictureUrl: '',
        weather: ''
    };

    getTime = () => {
        this.intervalId = setInterval(()=>{
            const currentTime = formateDate(Date.now());
            this.setState({currentTime});
        },1000)
    };

    getWeather = async () => {
        const {dayPictureUrl, weather} = await reqWeather('南京');
        this.setState({dayPictureUrl, weather});
    };

    getTitle = () => {
        const path = this.props.location.pathname;
        let title = '';
        menuList.forEach(item => {
            if (item.key === path) {
                title = item.title;
            } else if (item.children) {
                item.children.forEach((child => {
                    if (path.indexOf(child.key ) === 0) {
                        title = child.title;
                    }
                }))
            }
        });
        return title;
    };

    logout = () => {
        Modal.confirm({
            title: '退出',
            content: '确定退出当前用户吗？',
            okText: '确定',
            cancelText: '取消',
            onOk: () => {
                //memoryUtils.user = {};
                //storageUtils.removeUser();
                //this.props.history.replace('/login');

                this.props.logout();
            }
        });
    };

    componentDidMount() {
        this.getTime();

        this.getWeather();
    }

    componentWillUnmount() {
        clearInterval(this.intervalId);
    }

    render() {
        const {currentTime,dayPictureUrl,weather} = this.state;
        //const username = memoryUtils.user.username;
        const username = this.props.user.username;
        //const title = this.getTitle();
        const title = this.props.headTitle;
        return (
            <div className='header'>
                <div className='header-top'>
                    <span>欢迎，{username}</span>
                    <LinkButton onClick={this.logout}>退出</LinkButton>
                </div>
                <div className='header-bottom'>
                    <div className='header-bottom-left'>{title}</div>
                    <div className='header-bottom-right'>
                        <span>{currentTime}</span>
                        <img src={dayPictureUrl} alt='weather'/>
                        <span>{weather}</span>
                    </div>
                </div>
            </div>
        );
    }
}

export default connect(
    state => ({headTitle: state.headTitle, user: state.user}),
    {logout}
)(withRouter(Header));